<template>
  <div>
    <Content>
      <div class="scroll-list-container">
        <div class="scroll-list" v-for="item in scrollList" :key="item.id">
          <img :src="item.pic"/>
          <div class="scroll-list-text">
            <p class="p1">{{ item.title }}</p>
            <p class="p2">{{ item.descript }}</p>
            <div class="scroll-list-button" @click="onClickScrollDetail(item.id)">
                查看详情
            </div>
          </div>
        </div>
      </div>
    </Content>
  </div>
</template>

<script>
import Content from "../../components/content/Content";

export default {
  data() {
    return {
      scrollList: [],
    };
  },
  components:{Content},
  mounted() {
    this.$API.getScroll().then((res) => {
      // console.log(res);
      this.scrollList = res.data.data;
    });
  },
  methods:{
      onClickScrollDetail(id){
          this.$router.push({path:"/scrollDetail",
          query:{id:id}
          })
      }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.scroll-list-container {
  width: 100%;
  height: 100vh;
  margin-top: 64px;
  /* background-color: cadetblue; */
}
.scroll-list {
  height: 7.2rem;
  margin-top:0.2rem;
  position:relative;
}
.scroll-list img {
  height:100%;
  width: 100%;
}
.scroll-list-text {
  position: absolute;
  color: white;
  left: 1.8rem;
  top: 1rem;
}
.scroll-list-text .p1{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-size:1rem;  
  text-align:center;
}
.scroll-list-text .p2{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-size:0.6rem;
  margin-top:10px;
}
.scroll-list-button{
    width:70px;
    height:25px;
    font-size:0.7rem;
    border:1px solid white;
    border-radius:20px;
    line-height:25px;
    text-align: center;
    margin-top:20px;
    margin-left:100px;
}
</style>